<template>
	<div class="login">
		<div class="login-weaper">
			<div class="login-left">
				<div class="login-time">{{ time.txt }}</div>
				<div class="login-left-box">
					<div>
						<div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
						<h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
						<div class="msg">
							<div class="msg-author">
								<span>{{ quotations.name }}</span>
								<span>{{ quotations.comeFrom }}</span>
							</div>
							<div class="msg-txt">{{ quotations.content }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="login-right">
				<div class="login-main">
					<h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
					<a-form-model ref="ruleForm" :model="loginForm" class="login-form">
						<a-form-model-item style="margin-left: 0px" prop="username">
							<a-input type="text" placeholder="请输入" v-model="loginForm.username" clearable>
								<a-icon slot="prefix" type="user" />
							</a-input>
						</a-form-model-item>
						<a-form-model-item style="margin-left: 0px" prop="password">
							<a-input-password type="password" placeholder="请输入密码" v-model="loginForm.password" :show-password="true">
								<a-icon slot="prefix" type="lock" />
							</a-input-password>
						</a-form-model-item>
						<a-form-model-item class="a-form-item" style="margin-left: 0px" prop="code">
							<a-row>
								<a-col :span="16">
									<a-input type="text" :max-length="4" placeholder="请输入" v-model="loginForm.code" clearable>
										<a-icon slot="prefix" type="safety" />
									</a-input>
								</a-col>
								<a-col :span="8">
									<div class="login-code">
										<img :src="codeUrl" @click="getCode" class="login-code-img" />
									</div>
								</a-col>
							</a-row>
						</a-form-model-item>
						<a-form-model-item class="a-form-item" style="margin: 40px 0px 0">
							<a-button type="primary" class="login-submit" @click="submitForm" :loading="submit.loading">
								<span>登 录</span>
							</a-button>
						</a-form-model-item>
					</a-form-model>
					<div class="login-menu">
						<a href="javascript:;">第三方登录</a>
						<a href="javascript:;">友情链接</a>
					</div>
				</div>
			</div>
		</div>
		<div class="vue-particles">
			<vue-particles color="#dedede" shapeType="star" linesColor="#dedede" hoverMode="grab" clickMode="push" style="height: 100%"></vue-particles>
		</div>
	</div>
</template>

<script>
import { Session } from '@/utils/storage';
import { formatDate, formatAxis } from '@/utils/formatTime';
import { PrevLoading } from '@/utils/loading.js';
import Cookies from 'js-cookie';
import { signIn, getCaptchaImage } from '@/api/login';

export default {
	name: 'login',
	data() {
		return {
			codeUrl: '',
			// 验证码开关
			captchaOnOff: true,
			quotations: {},
			isView: false,
			submit: {
				loading: false,
			},
			loginForm: {
				username: 'admin',
				password: 'admin123',
				rememberMe: false,
				code: '',
				uuid: '',
			},
			time: {
				txt: '',
				fun: null,
			},
			redirect: undefined ,// 重定向之类
		};
	},
	computed: {
		// 获取当前时间
		currentTime() {
			return formatAxis(new Date());
		},
		// 获取布局配置信息
		getThemeConfig() {
			return this.$store.state.themeConfig.themeConfig;
		},
	},
	created() {
		this.initTime();
		this.getCookie();
		this.getCode(); // 获取验证码图片
	},
	mounted() {},
	methods: {
		// 获取验证图片
		getCode() {
			getCaptchaImage().then((res) => {
				this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
				if (this.captchaOnOff) {
					this.codeUrl = 'data:image/gif;base64,' + res.img;
					this.loginForm.uuid = res.uuid;
				}
			});
		},
		// 获取cookie
		getCookie() {
			const username = Cookies.get('username');
			const password = Cookies.get('password');
			const rememberMe = Cookies.get('rememberMe');
			this.loginForm = {
				username: username === undefined ? this.loginForm.username : username,
				password: password === undefined ? this.loginForm.password : this.loginForm.password,
				rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
			};
		},
		// 初始化左上角时间显示
		initTime() {
			this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			this.time.fun = setInterval(() => {
				this.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
			}, 1000);
		},
		// 登录按钮点击
		submitForm() {

			if (this.loginForm.rememberMe) {
				Cookies.set('username', this.loginForm.username, { expires: 30 });
				Cookies.set('password', this.loginForm.password, { expires: 30 });
				Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
			} else {
				Cookies.remove('username');
				Cookies.remove('password');
				Cookies.remove('rememberMe');
			}
			// signIn(this.loginForm).then((res) => {
			// 	console.log(9292, res);
			// });
			this.$store.dispatch("Login", this.loginForm).then(() => {
					let defaultRoles = [];
					let defaultAuthBtnList = [];
					// admin 页面权限标识，对应路由 meta.roles
					let adminRoles = ['admin'];
					// admin 按钮权限标识
					let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
					// common 页面权限标识，对应路由 meta.roles
					let testAuthPageList = ['common'];
					// test 按钮权限标识
					let testAuthBtnList = ['btn.add', 'btn.link'];
					if (this.loginForm.username === 'admin') {
						defaultRoles = adminRoles;
						defaultAuthBtnList = adminAuthBtnList;
					} else {
						defaultRoles = testAuthPageList;
						defaultAuthBtnList = testAuthBtnList;
					}
					const userInfos = {
						userName: this.loginForm.username === 'admin' ? 'admin' : 'test',
						photo:
							this.loginForm.username === 'admin'
								? 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg'
								: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg',
						time: new Date().getTime(),
						roles: defaultRoles,
						authBtnList: defaultAuthBtnList,
					};
					// 存储 token 到浏览器缓存
					// Session.set('token', Math.random().toString(36).substr(0));
					// 存储用户信息到浏览器缓存
					Session.set('userInfo', userInfos);
					// 存储用户信息到vuex
					this.$store.dispatch('userInfos/setUserInfos', userInfos);
				    window.location.href = `${window.location.origin}${window.location.pathname}`
			}).catch(() => {
				this.loading = false;
				if (this.captchaOnOff) {
				this.getCode();
				}
			});
		},
	},
	destroyed() {
		clearInterval(this.time.fun);
	},
};
</script>

<style scoped lang="scss">
.login {
	height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
	.vue-particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
	}
	.login-weaper {
		margin: auto;
		height: 500px;
		display: flex;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		border: none;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
		.login-left {
			width: 491px;
			padding: 20px;
			font-size: 16px;
			color: #fff;
			position: relative;
			background-color: rgba(64, 158, 255, 0.8);
			display: flex;
			flex-direction: column;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			.login-time {
				width: 100%;
				color: #fff;
				opacity: 0.9;
				font-size: 14px;
				overflow: hidden;
			}
			.login-left-box {
				flex: 1;
				overflow: hidden;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				padding: 80px 45px;
				.logo {
					font-size: 22px;
					margin-bottom: 15px;
				}
				.title {
					color: #fff;
					font-weight: 300;
					letter-spacing: 2px;
					font-size: 16px;
				}
				.msg {
					color: #fff;
					font-size: 13px;
					margin-top: 35px;
					.msg-author {
						opacity: 0.6;
						span:last-of-type {
							margin-left: 15px;
						}
					}
					.msg-txt {
						margin-top: 15px;
						line-height: 22px;
					}
				}
			}
		}
		.login-right {
			width: 491px;
			padding: 20px;
			position: relative;
			align-items: center;
			display: flex;
			background-color: rgba(255, 255, 255, 1);
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			.login-main {
				margin: 0 auto;
				width: 70%;
				.login-title {
					color: #333;
					margin-bottom: 40px;
					font-weight: 500;
					font-size: 22px;
					text-align: center;
					letter-spacing: 4px;
				}
				.login-form {
					margin: 10px 0;
					i {
						color: #333;
					}
					.a-form-item {
						margin-bottom: 20px !important;
						.login-code {
							display: flex;
							align-items: center;
							justify-content: space-around;
							margin: 0 0 0 10px;
							user-select: none;
							.login-code-img {
								margin-top: 2px;
								width: 100px;
								height: 38px;
								border: 1px solid #dcdfe6;
								color: #333;
								font-size: 14px;
								font-weight: 700;
								letter-spacing: 5px;
								line-height: 38px;
								text-indent: 5px;
								text-align: center;
								cursor: pointer;
								transition: all ease 0.2s;
								border-radius: 4px;
								&:hover {
									border-color: #c0c4cc;
									transition: all ease 0.2s;
								}
							}
						}
						.login-submit {
							width: 100%;
							height: 45px;
							letter-spacing: 2px;
							font-weight: 300;
						}
					}
				}
				.login-menu {
					margin-top: 30px;
					width: 100%;
					text-align: left;
					a {
						color: #999;
						font-size: 12px;
						margin: 0 8px;
						text-decoration: none;
						&:hover {
							color: #1e9fff;
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
}
</style>
